import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { ListItem, ListInfo, LoadMore } from '../style'
import { actionCreators } from '../store'
import { Link } from 'react-router-dom'

class List extends PureComponent {
  render() {
    const { list, getMoreList, page } = this.props
    return (
      <div>
        {list.map((item, index) => {
          let imgUrl = item.get('imgUrl')
          return (
            <Link key={index} to='/detail'>
              <ListItem >
                <img
                  alt=''
                  className={imgUrl ? 'list-pic' : 'list-pic no-pic'}
                  src={imgUrl}
                />
                <ListInfo className={imgUrl ? '' : 'no-pic'}>
                  <h3 className="title">{item.get('title')}</h3>
                  <p className="content">{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            </Link>
          )
        })}

        <LoadMore onClick={() => { getMoreList(page) }}>显示更多内容</LoadMore>
      </div>
    )
  }
}

const mapState = state => ({
  list: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'articlePage']),
})

const mapDispatch = dispatch => ({
  getMoreList(page) {
    dispatch(actionCreators.getMoreList(page))
  }
})

export default connect(
  mapState,
  mapDispatch
)(List)
